<template>
  <div id="Binding">
    <div class="main">
      <div class="main-top">
        <img class="logo" src="https://19jwshow.oss-cn-shenzhen.aliyuncs.com/wdad/logo/LOGO.png" alt="">
        <p class="ceremony">绑定手机号</p>
        <p class="appellation">在下方输入你的手机号</p>
      </div>
      <div class="form">
        <p>手机号</p>
        <div class="phone-box">
          <a-input class="form-phone" v-model:value="mobile" placeholder="请输入手机号"/>
          <div v-if="disabled">
            <button class="phone-button-overdue"><span>{{ num }}</span>秒后再发送</button>
          </div>
          <div v-else>
            <button class="phone-button" @click="sendOut"><span>发送验证码</span></button>
          </div>
        </div>

        <div class="form-num">
          <p class="username ver">验证码</p>
          <a-input ref="inputValueA" maxlength=1 type="text" v-model:value="codeA" class="captcha-input"
                   @input="obtainValue"/>
          <a-input ref="inputValueB" maxlength=1 type="text" v-model:value="codeB" class="captcha-input"
                   @input="obtainValue"/>
          <a-input ref="inputValueC" maxlength=1 type="text" v-model:value="codeC" class="captcha-input"
                   @input="obtainValue"/>
          <a-input ref="inputValueD" maxlength=1 type="text" v-model:value="codeD" class="captcha-input"
                   @input="obtainValue"/>
          <a-input ref="inputValueE" maxlength=1 type="text" v-model:value="codeE" class="captcha-input"
                   @input="obtainValue"/>
          <a-input ref="inputValueF" maxlength=1 type="text" v-model:value="codeF" class="captcha-input"
                   @input="obtainValue"/>
        </div>
        <div class="sign">
          <span class="phone">差最后一步了</span>
          <button class="button" @click="submit"><span>绑定</span></button>
        </div>
      </div>
      <div class="main-footer">
        <p class="make">网站制作</p>
        <p class="explain">Website Design And Development</p>
        <p class="copy">2021-2022&copy;网站设计与开发项目组</p>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, ref} from 'vue'
import {message} from 'ant-design-vue';
import router from "@/router";
import $store from '@/store/index'

export default defineComponent({
  name: 'loginBindingPass',
  setup() {
    const mobile = ref('');
    const codeA = ref('');
    const codeB = ref('');
    const codeC = ref('');
    const codeD = ref('');
    const codeE = ref('');
    const codeF = ref('');
    const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    let inputValueA = ref(null),
        inputValueB = ref(null),
        inputValueC = ref(null),
        inputValueD = ref(null),
        inputValueE = ref(null),
        inputValueF = ref(null);
    //登录点击事件
    const submit = () => {
      //将验证码存放在一个数组里
      let verification = [codeA.value, codeB.value, codeC.value, codeD.value, codeE.value, codeF.value].join('');
      if (mobile.value == "" || verification.length < 6) {
        message.error(
            '手机号与验证码不能为空:(',
            3,
        );
      } else if (!reg_tel.test(mobile.value)) {
        message.error(
            '请输入正确的手机号码:(',
            3,
        );
      } else {
        proxy.$request('put', '/api/v1/user/phone', {
          phone: mobile.value,
          code: verification
        }).then(res => {
          console.log(res)
          //后台判断验证码是否正确
          switch (res.code) {
            case 4004:
              message.error(
                  '验证码不正确:(',
                  3,
              );
              codeA.value = ''
              codeB.value = ''
              codeC.value = ''
              codeD.value = ''
              codeE.value = ''
              codeF.value = ''
              break;
            case 4006:
              message.error(
                  res.msg,
                  3,
              );
              codeA.value = ''
              codeB.value = ''
              codeC.value = ''
              codeD.value = ''
              codeE.value = ''
              codeF.value = ''
              break;
            case 200:
              $store.commit('setTokens', res.data.token);
              $store.commit("setUserInfo", Object.assign({isLogin: true}, res.data.token))
              router.push('/home');
              message.success(
                  '登录成功:)',
                  3,
              )
                mobile.value = ''
                codeA.value = ''
                codeB.value = ''
                codeC.value = ''
                codeD.value = ''
                codeE.value = ''
                codeF.value = ''
                break;
          }
        })

      }
    }
    const visible = ref(false);
    let {proxy} = getCurrentInstance();
    //验证码获取倒计时
    let disabled = ref(false),
        num = ref(60);
    const countDown = () => {
      disabled.value = true;
      let intervalBtn = setInterval(() => {
        if (num.value <= 0) {
          clearInterval(intervalBtn)
          disabled.value = false;
          num.value = 60;
        }
        num.value--;
      }, 1000)

    }
    //手机号无误执行下列函数
    const sendOut = () => {
      if (mobile.value == "") {
        message.error(
            '请输入正确的手机号码:(',
            3,
        );
      } else if (!reg_tel.test(mobile.value)) {
        message.error(
            '请输入正确的手机号码:(',
            3,
        );
      } else {
        countDown()
        proxy.$request('post', '/api/v1/user/first/verify', {
          phone: mobile.value
        }).then(res => {
          switch (res.code) {
            case 200:
              message.success(
                  '发送成功:)',
                  3,
              );
              break;
            case 4006:
              message.error(
                  '用户不存在:(',
                  3,
              );
              break;
          }
        })
        inputValueA.value.focus();
      }
    }




    //获取验证码input焦点
    const obtainValue = () => {
      if (codeA.value.length > 0) {
        inputValueB.value.focus();
      }
      if (codeB.value.length > 0) {
        inputValueC.value.focus();
      }
      if (codeC.value.length > 0) {
        inputValueD.value.focus();
      }
      if (codeD.value.length > 0) {
        inputValueE.value.focus();
      }
      if (codeE.value.length > 0) {
        inputValueF.value.focus();
      }
    }
    return {
      mobile,
      codeA,
      codeB,
      codeC,
      codeD,
      codeE,
      codeF,
      visible,
      inputValueA,
      inputValueB,
      inputValueC,
      inputValueD,
      inputValueE,
      inputValueF,
      submit,
      sendOut,
      obtainValue,
      countDown,
      num,
      disabled,
    }
  }
});
</script>

<style lang="less">
#Binding {
  display: flex;

  .ant-row {
    height: 100%;
  }

  .main .main-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }


  .main .ceremony {
    width: 100%;
    text-align: center;
    color: #98A6AD;
  }

  .main .appellation {
    width: 100%;
    text-align: center;
    font-weight: bold;
  }

  .main .form p {
    font-weight: bold;
    line-height: 30px;
    font-size: 14px;
    margin: 0;
  }

  .main .form input {
    height: 45px;
    border-radius: 8px;
    margin-bottom: 28px;
  }
  .main .form .phone-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main .form .phone-box .form-phone {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  .main .form .phone-box .phone-button {
    width: 108px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6777EF;
    color: #fff;
    margin-bottom: 28px;
    outline: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    left: -6px;
    transition: all 1s;
  }
  .main .form .phone-box .phone-button-overdue {
    width: 105px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D9D9D9;
    color: #fff;
    margin-bottom: 28px;
    outline: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    left: -10px;
    transition: all 1s;
  }

  .main .form .phone-box .phone-button:hover {
    background-color: #3C50E1;
  }
  .main .form .ant-input-password {
    border-radius: 8px;
    margin-bottom: 28px;
  }

  .main .form .ant-input-password .ant-input {
    margin: 0;
    height: 35px;
  }

  .main .form .pass .ant-inputt {
    height: 35px;
    margin: 0;
  }

  .main .form .checkbox {
    color: black;
  }

  .main .form .checkbox {
    margin-left: 10px;
    font-weight: lighter;
    margin-top: 7px;
    display: block;
  }

  .main .form .check {
    height: 30px;
    display: flex;
  }

  .form .sign {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10%;
  }

  .form .sign .phone {
    color: #6777EF;
    font-size: 14px;
  }

  .ant-btn {
    width: 76px;
    height: 44px;
    background: #6777EF;
    box-shadow: 0 2px 6px 1px rgba(182, 191, 255, 0.800000011920929);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    border: 1px solid #6777EF;

  }

  .ant-btn:hover {
    background-color: #3C50E1;
  }

  .ant-btn span {
    color: #fff;
  }

  .main-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .main-footer p {
    width: 100%;
    text-align: center;
  }

  .main-footer .make {
    color: #98A6AD;
  }
  .main-footer .copy {
    font-weight: lighter;
  }
  .main-footer .explain {
    font-weight: bold;
    line-height: 5px;
  }


  .vef {
    width: 100%;
  }

  .form .form-num {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .form .form-num p {
    width: 100%;
  }

}


</style>